import React from 'react'
import { connect } from 'dva'
import { Card, Spin, Row, Col } from 'antd'

const SketchMap = ({ field, list }) => {
    const maxData = JSON.parse(JSON.stringify(list)).sort((a, b) => b.value - a.value)[0]
    const scale = field.find(item => item.name === '规模').id
    const style = field.find(item => item.name === '风格').id
    

    return (
        <Card className="sketchMap"  bordered={false}>
            <Row type="flex" align="middle">
                <Col span={14} offset={2}>
                    <table>
                        <tbody>
                            <tr>
                                <td></td>
                                <td>
                                    <table className="style">
                                        <tbody>
                                            <tr>
                                                <td>价值型</td>
                                                <td>平衡型</td>
                                                <td>成长型</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table className="scale">
                                        <tbody>
                                            <tr>
                                                <td>大盘</td>
                                            </tr>
                                            <tr>
                                                <td>中盘</td>
                                            </tr>
                                            <tr>
                                                <td>小盘</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td>
                                    <table className="gezi">
                                        <tbody>
                                            {/*<tr>
                                                <td className={(maxData[scale] === '大盘') && (maxData[style] === '价值型')? 'on':''}>大盘价值型</td>
                                                <td className={(maxData[scale] === '大盘') && (maxData[style] === '平衡型')? 'on':''}>大盘平衡型</td>
                                                <td className={(maxData[scale] === '大盘') && (maxData[style] === '成长型')? 'on':''}>大盘成长型</td>
                                            </tr>
                                            <tr>
                                                <td className={(maxData[scale] === '中盘') && (maxData[style] === '价值型')? 'on':''}>中盘价值型</td>
                                                <td className={(maxData[scale] === '中盘') && (maxData[style] === '平衡型')? 'on':''}>中盘平衡型</td>
                                                <td className={(maxData[scale] === '中盘') && (maxData[style] === '成长型')? 'on':''}>中盘成长型</td>
                                            </tr>
                                            <tr>
                                                <td className={(maxData[scale] === '小盘') && (maxData[style] === '价值型')? 'on':''}>小盘价值型</td>
                                                <td className={(maxData[scale] === '小盘') && (maxData[style] === '平衡型')? 'on':''}>小盘平衡型</td>
                                                <td className={(maxData[scale] === '小盘') && (maxData[style] === '成长型')? 'on':''}>小盘成长型</td>
                                            </tr>*/}
                                            <tr>
                                                <td className={(maxData[scale] === '大盘') && (maxData[style] === '价值型')? 'on':''}><div className="gezitem">大盘价值型</div></td>
                                                <td className={(maxData[scale] === '大盘') && (maxData[style] === '平衡型')? 'on':''}><div className="gezitem">大盘平衡型</div></td>
                                                <td className={(maxData[scale] === '大盘') && (maxData[style] === '成长型')? 'on':''}><div className="gezitem">大盘成长型</div></td>
                                            </tr>
                                            <tr>
                                                <td className={(maxData[scale] === '中盘') && (maxData[style] === '价值型')? 'on':''}><div className="gezitem">中盘价值型</div></td>
                                                <td className={(maxData[scale] === '中盘') && (maxData[style] === '平衡型')? 'on':''}><div className="gezitem">中盘平衡型</div></td>
                                                <td className={(maxData[scale] === '中盘') && (maxData[style] === '成长型')? 'on':''}><div className="gezitem">中盘成长型</div></td>
                                            </tr>
                                            <tr>
                                                <td className={(maxData[scale] === '小盘') && (maxData[style] === '价值型')? 'on':''}><div className="gezitem">小盘价值型</div></td>
                                                <td className={(maxData[scale] === '小盘') && (maxData[style] === '平衡型')? 'on':''}><div className="gezitem">小盘平衡型</div></td>
                                                <td className={(maxData[scale] === '小盘') && (maxData[style] === '成长型')? 'on':''}><div className="gezitem">小盘成长型</div></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </Col>
                <Col span={6} offset={2} style={{paddingLeft:20}}>
                    <dl>
                        <dt>风格：</dt>
                        <dd>{maxData[style]}</dd>
                    </dl>
                    <dl>
                        <dt>规模：</dt>
                        <dd>{maxData[scale]}</dd>
                    </dl>
                </Col>
            </Row>
        </Card>
    )
}

const StockStyleScale = ({ field,list }) => {

    const calcBgColor = (value) => {
        
        
        if (value*100 > 50) {
            return '#003968'
        } else if (value*100 <= 50 && value*100 > 25) {
            return '#0063B4'
        } else if (value*100 <= 25 && value*100 > 10) {
            return '#37A5FF'
        } else {
            return '#81C6FF'
        }
    }

    return (
        <Card className="stockStyleScale" bordered={false}>
            <Row type="flex" align="middle">
                <Col span={14} offset={2}>
                    <table>
                        <tbody>
                            <tr>
                                <td></td>
                                <td>
                                    <table className="style">
                                        <tbody>
                                            <tr>
                                                <td>价值型</td>
                                                <td>平衡型</td>
                                                <td>成长型</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table className="scale">
                                        <tbody>
                                            <tr>
                                                <td>大盘</td>
                                            </tr>
                                            <tr>
                                                <td>中盘</td>
                                            </tr>
                                            <tr>
                                                <td>小盘</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td>
                                    <table className="gezi">

                                        <tbody>
                                            {/*<tr>
                                                <td style={{ background: calcBgColor(list[0].value) }}>{list[0].value.toPercent()}</td>
                                                <td style={{ background: calcBgColor(list[1].value) }}>{list[1].value.toPercent()}</td>
                                                <td style={{ background: calcBgColor(list[2].value) }}>{list[2].value.toPercent()}</td>
                                            </tr>
                                            <tr>
                                                <td style={{ background: calcBgColor(list[3].value) }}>{list[3].value.toPercent()}</td>
                                                <td style={{ background: calcBgColor(list[4].value) }}>{list[4].value.toPercent()}</td>
                                                <td style={{ background: calcBgColor(list[5].value) }}>{list[5].value.toPercent()}</td>
                                            </tr>
                                            <tr>
                                                <td style={{ background: calcBgColor(list[6].value) }}>{list[6].value.toPercent()}</td>
                                                <td style={{ background: calcBgColor(list[7].value) }}>{list[7].value.toPercent()}</td>
                                                <td style={{ background: calcBgColor(list[8].value) }}>{list[8].value.toPercent()}</td>
                                            </tr>*/}
                                            <tr>
                                                <td style={{ background: calcBgColor(list[0].value) }}><div className="gezitem">{list[0].value.toPercent()}</div></td>
                                                <td style={{ background: calcBgColor(list[1].value) }}><div className="gezitem">{list[1].value.toPercent()}</div></td>
                                                <td style={{ background: calcBgColor(list[2].value) }}><div className="gezitem">{list[2].value.toPercent()}</div></td>
                                            </tr>
                                            <tr>
                                                <td style={{ background: calcBgColor(list[3].value) }}><div className="gezitem">{list[3].value.toPercent()}</div></td>
                                                <td style={{ background: calcBgColor(list[4].value) }}><div className="gezitem">{list[4].value.toPercent()}</div></td>
                                                <td style={{ background: calcBgColor(list[5].value) }}><div className="gezitem">{list[5].value.toPercent()}</div></td>
                                            </tr>
                                            <tr>
                                                <td style={{ background: calcBgColor(list[6].value) }}><div className="gezitem">{list[6].value.toPercent()}</div></td>
                                                <td style={{ background: calcBgColor(list[7].value) }}><div className="gezitem">{list[7].value.toPercent()}</div></td>
                                                <td style={{ background: calcBgColor(list[8].value) }}><div className="gezitem">{list[8].value.toPercent()}</div></td>
                                            </tr>
                                        </tbody>

                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </Col>
                <Col span={6} offset={2} className="legend">
                    <dl>
                        <dt style={{ background: '#003968' }}></dt>
                        <dd>&gt;50%</dd>
                    </dl>
                    <dl>
                        <dt style={{ background: '#0063B4' }}></dt>
                        <dd>25～50%</dd>
                    </dl>
                    <dl>
                        <dt style={{ background: '#37A5FF' }}></dt>
                        <dd>10～25%</dd>
                    </dl>
                    <dl>
                        <dt style={{ background: '#81C6FF' }}></dt>
                        <dd>0～10%</dd>
                    </dl>
                </Col>
            </Row>
        </Card>

    )
}
/**
 * ManagerStyleBoxCharts 
 */
class ManagerStyleBoxCharts extends React.Component {
    state = {
        data: this.props.managerStyleBoxCharts,
    }
    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {

        if ((nextProps.lPortId !== this.props.lPortId)) {
            this.fetchData(nextProps)
        }
        if (nextProps.managerStyleBoxCharts !== this.props.managerStyleBoxCharts) {
            this.setState({
                data: nextProps.managerStyleBoxCharts,
            })
        }
    }
    fetchData = (props) => {
        this.setState({
            data: {}
        })
        props.dispatch({
            type: 'combinatorialAnalysis/getManagerStyleBoxCharts',
            payload: props
        })
    }
    render() {
        return (
            <Card className="managerStyleBoxCharts">
                {
                    Object.keys(this.state.data).length ? (
                        <Row gutter={10}>
                            <Col span={12}><SketchMap {...this.state.data} /></Col>
                            <Col span={12}><StockStyleScale {...this.state.data} /></Col>
                        </Row>
                    ) : <Spin />
                }
            </Card>
        )

    }
}

ManagerStyleBoxCharts.defaultProps = {
    lPortId: null,
    managerStyleBoxCharts: {
        "field": [
            {
                "name": "规模",
                "id": "scale"
            },
            {
                "name": "风格",
                "id": "style"
            }
        ],
        "list": [
            {
                "scale": "大盘",
                "style": "价值型",
                "value": 13.39
            },
            {
                "scale": "大盘",
                "style": "平衡型",
                "value": 31.14
            },
            {
                "scale": "大盘",
                "style": "成长型",
                "value": 1.98
            },
            {
                "scale": "中盘",
                "style": "价值型",
                "value": 3.39
            },
            {
                "scale": "中盘",
                "style": "平衡型",
                "value": 49
            },
            {
                "scale": "中盘",
                "style": "成长型",
                "value": 2.78
            },
            {
                "scale": "小盘",
                "style": "价值型",
                "value": 3.57
            },
            {
                "scale": "小盘",
                "style": "平衡型",
                "value": 57.24
            },
            {
                "scale": "小盘",
                "style": "成长型",
                "value": 16.98
            }
        ]
    }
}

export default connect()(ManagerStyleBoxCharts)
